<template>

  <div class="mask">
<!--    <u-mask :show="show"  :mask-click-able="false" @click="show = false">-->
<!--     -->
<!--    </u-mask>-->
    <div class="Scale">
      <view class="Scale_top">
          <view @click="closeScale">取消</view>
          <text class="Scale_tit">{{direction == 'horizontal'?'选择体重':'选择身高'}}</text>
          <view @click="scaleValue">完成</view>
      </view>
      <view v-if="direction == 'horizontal'">
        <view class='scale-value'>
          <text>{{horizontaPointVal}}</text>
          <view v-if="direction == 'horizontal'">千克</view>
          <view v-if="direction == 'vertical'">厘米</view>
        </view>
        <vue-scale :min="min"
                   :max="max"
                   :int="false"
                   :single="10"
                   :h="70"
                   :active="active"
                   :styles="styles"
                   :direction="direction"
                   @value="horizontaPointMethods"/>
      </view>
<!--		<view v-if="direction == 'vertical'">-->
<!--		  <view class='scale-value'>-->
<!--		    <text>{{horizontaPointVal}}</text>-->
<!--		    <view v-if="direction == 'vertical'">厘米</view>-->
<!--		  </view>-->
<!--		  <vue-scale :min="min"-->
<!--		             :max="max"-->
<!--		             :int="false"-->
<!--		             :single="10"-->
<!--		             :h="70"-->
<!--		             :active="active"-->
<!--		             :styles="styles"-->
<!--                 :direction="direction"-->
<!--		             @value="horizontaPointMethods"/>-->
<!--		</view>-->
    <view v-if="direction == 'vertical'" style="display: flex;align-items:center;padding-right: 100rpx">
        <view class='scale-value'>
          <text>{{horizontaPointVal}}</text>
          <view v-if="direction == 'vertical'">厘米</view>
        </view>
        <vue-scale :min="min"
                   :max="max"
                   :int="false"
                   :single="10"
                   :h="70"
                   :active="active"
                   :styles="styles"
                   :direction="direction"
                   @value="horizontaPointMethods"/>
        <view class="tabs">{{horizontaPointVal}}</view>

      </view>
    </div>
  </div>
</template>

<script>
import vueScale from '@/components/sapling-vue-scale/sapling-vue-scale.vue';
export default {
name: "Scale",
  components: {
    vueScale,
  },
  props: {
    // 最小值
    direction: {
      type: String,
      default: 'horizontal',
    },
    // 最小值
    min: {
      type: Number,
      default: 0,
    },
    // 最大值
    max: {
      type: Number,
      default: 100,
    },
    //默认值
    active: {
      type: Number,
      default: 100,
    },


  },
  data() {
    return {
      weight: 11,
      height: 180,
      styles: {
        line: '#BCE27F',
        bginner: '#BCE27F',
        bgoutside: '#ffffff',
        font: '#404040',
        fontColor: '#BCE27F',
        fontSize: 16,
        lineSelect:'#BCE27F',
      },
      horizontaPointVal: '',
      horizontaNoPointVal: '',

      show:true,


    };
  },
  methods: {
    // 横向滚动有小数点
    horizontaPointMethods(msg) {
      this.horizontaPointVal = msg;
    },
    // 横向滚动没有小数点
    horizontaNoPointMethods(msg) {
      this.horizontaNoPointVal = msg;
    },
    //点击确定成功回调
    scaleValue(){
      this.$emit('scaleValue',this.horizontaPointVal)
    },
    closeScale(){
		// 
	console.log('关闭窗口')
      this.$emit('closeScale')
	  

    }
  },
}
</script>

<style scoped lang="scss">
.mask{
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: absolute;
  bottom: 0;
  z-index: 9999;
}
.Scale_top{
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #DDDDDD;
  margin-bottom: 40rpx;
  padding: 0 30rpx;
  >view{
    color: #BCE27F;
  }
}
  .Scale{
    width: 100%;
    height: 50vh;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    background: #ffffff;
    .scale-value{
      width: 100%;
      height: 100rpx;
      color:#BCE27F;
      display: flex;
      align-items: center;
      justify-content: center;
      >text{
        font-size: 52rpx;
        font-weight: bold;
      }
      >view{
        margin-left: 10rpx;
      }
    }
  }
.tabs{
  width: 160rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  background: url("http://quran-ehealte-applet.oss-cn-shenzhen.aliyuncs.com/applet/customUser/userID-unKnows/2021-7-15/16263357220547392.png");
  background-size: cover;
  color: #ffffff;
  font-size: 24rpx;
  margin-left: 70rpx;

}
</style>
